<template>
  <div class="box">
    <p style="    text-align: center;
    font-size: 26px;">
        获客渠道看板
    </p>
    <div class="tab1">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="月度分析" name="first"></el-tab-pane>
        <el-tab-pane label="年度分析" name="second"></el-tab-pane>
      </el-tabs>
    </div>

    <div
      style="display: flex; justify-content: space-between; padding: 0px 10px"
    >
      <p>2022年9月 <i class="el-icon-caret-bottom el-icon--right"></i></p>
      <div style="line-height: 55px;">
        <el-button type="primary" plain size="mini" round>新户</el-button>
        <el-button type="primary" plain size="mini" round>存量</el-button>
      </div>
    </div>

    <div
      style="
        background: white;
        border-radius: 20px;
        margin: 0px 10px;
        padding: 10px;
      "
    >
        <div class="tab2">
      <el-tabs v-model="activeName2" @tab-click="handleClick">
        <el-tab-pane label="获客量" name="first"></el-tab-pane>
        <el-tab-pane label="MOB3动卡率" name="second"></el-tab-pane>
        <el-tab-pane label="MOB6逾期率" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <div style="display: flex;
    background: #eeeeee70;
    border-radius: 20px;
    padding: 0 10px;">
        <div style="line-height: 130px;
    font-size: 22px;
    color: blue;margin: 0 10px;"> 
            当月21.34万
        </div>
        <div style="flex:1">
            <p class="css5"><span>比上日</span><span> +888888</span></p>
            <p class="css5"><span>比上月同期</span><span> +2748338</span></p>
            <p class="css5"><span>比目标</span><span> +37879</span></p>
        </div>
    </div>
    </div>


    <div
      style="
        margin: 25px 10px;
        padding: 10px;
        background: white;
        border-radius: 10px;
      "
    >
        <div  style="display:flex;justify-content: space-between;">
            <p>新户渠道趋势</p>

             <div style="    line-height: 45px;">
                <el-button  @click="drawer = true" type="primary" plain size="mini" round>筛选 <i class="el-icon-caret-bottom el-icon--right"></i></el-button>
             </div>
        </div>
      

      <el-drawer
         title="筛选"
        :visible.sync="drawer "
        direction="rtl"
        :before-close="handleClose">
            <div>
                <el-button style=" margin-top: 10px;
    margin-left: 10px;
    margin-right: 0px;" v-for="(item,index) in list2" :key="index" type="primary" plain size="mini" round>{{item.type}}</el-button>
            </div>
        </el-drawer>

      <div id="main3" style="height: 300px; width: 440px"></div>
      
    </div>
    

    <div
      style="
        margin: 25px 10px;
        padding: 10px;
        background: white;
        border-radius: 10px;
      "
    >
      <p>新户渠道分类</p>

      <div id="main" style="height: 300px; width: 440px"></div>
      
      <div>
        <div class="css2" v-for="(item,index) in list1" :key="index">
            <div class="css3">
                <i class="el-icon-shopping-bag-2"></i>
            </div>
            <div class="css1">
                <p>{{item.type}}</p>
                <el-progress :percentage="item.value"></el-progress>
            </div>
        </div>

      </div>
    </div>

    <div
      style="
        margin: 25px 10px;
        padding: 10px;
        background: white;
        border-radius: 10px;
      "
    >
      <p>新户渠道排行</p>
      <div>
        <div class="css2" v-for="(item,index) in list1" :key="index">
            <div class="css3">
                <i class="el-icon-shopping-bag-2"></i>
            </div>
            <div class="css1">
                <p>{{item.type}}</p>
                <p>9-15 14：23</p>
            </div>
            <div class="css4">
                ￥2721.50
            </div>
        </div>

      </div>
    </div>


    <div
      style="
        margin: 25px 10px;
        padding: 10px;
        background: white;
        border-radius: 10px;
      "
    >
      <p>新户渠道对比</p>
      <div id="main2" style="height: 300px; width: 440px"></div>
    </div>

    <div style="height: 1px;"></div>
    <svg style="    position: fixed;">
        <linearGradient id="textGradient" x1="0" y1="0" x2="0" y2="1">
          <stop offset="20%" stop-color="#ffffff"></stop>
          <stop offset="100%" stop-color="#0082ff"></stop>
        </linearGradient>
      </svg>
  </div>
</template>
<script>
export default {
  data() {
    return {
        drawer:false,
        activeName:"first",
        activeName2:"first",
        list1:[
            {type:"类型1",value:50},
            {type:"类型2",value:70},
            {type:"类型3",value:20},
            {type:"类型4",value:70},
            {type:"类型5",value:53},
            {type:"类型6",value:80},
            {type:"类型7",value:30},
        ],

        list2:[
            {type:"类型1",value:50},
            {type:"类型2",value:70},
            {type:"类型3",value:20},
            {type:"类型4",value:70},
            {type:"类型5",value:53},
            {type:"类型6",value:80},
            {type:"类型7",value:30},
        ]
    };
  },
  mounted() {
    this.init();
    this.init2();
    this.showChart()
  },
  methods: {

    handleClose(done) {
        done();
      },


    init() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom, "dark", { renderer: "svg" });
      var option;

      var img =
        "";

      var trafficWay = [
        {
          name: "获客总计",
          value: 20,
        },
        {
          name: "线上总计",
          value: 10,
        },
        {
          name: "互联网场景及联名卡 ",
          value: 30,
        },
        {
          name: "空银",
          value: 40,
        },
        {
          name: "自有渠道",
          value: 40,
        },
        {
          name: "合伙人",
          value: 40,
        },
        {
          name: "线下总计",
          value: 40,
        },
        {
          name: "卡部场景",
          value: 40,
        },
        {
          name: "分行联动",
          value: 40,
        },

      ];

      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "block",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return (
                      params.name +
                      "\n" +
                      "\n" +
                      "占百分比：" +
                      percent +
                      "%"
                    );
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 10,
                length2: 40,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ];
      option = {
        backgroundColor: "#ffffff",
        color: color,
        title: {
          text: "{textcolor|线上总计}"+"\r\n"+"500000",
          top: "42%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            rich: {
              textcolor: {
                color: "url(#textGradient)",
                fontSize: 24,
              },
            },
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["火车", "飞机", "客车", "轮渡"],
          right: 340,
          bottom: 150,
          align: "right",
          textStyle: {
            color: "block",
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };

      option && myChart.setOption(option);
    },

    init2() {
      var chartDom = document.getElementById("main2");
      var myChart = this.$echarts.init(chartDom, 'dark', { renderer: 'svg' });
      let option
      
        option = {
   backgroundColor: "#ffffff",
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, 0)",
      textStyle: {
         color: "#FFF",
      },
      // axisPointer: {
      // 	type: "shadow",
      // 	label: {
      // 		show: true,
      // 	},
      // },
   },
   grid: {
      left: "10%",
      top: "18%",
      right: "5%",
      bottom: "25%",
   },
   legend: {
      top: "4%",
      left: '75%',
      "itemWidth": 13,
      "itemHeight": 13,
      itemStyle: {
         color: "#18A4FF"
      },
      "icon": "rect",
      "padding": 0,
      textStyle: {
         "color": "#c0c3cd",
         fontSize: 13,
         "padding": [2, 0, 0, 0]
      }
   },
   xAxis: {
      data: ["番茄", "土豆", "大豆", "芸豆", "青椒", "玉米", "油麦菜", "韭菜"],

      axisLine: {
         show: true, //隐藏X轴轴线
         lineStyle: {
            color: "#163a5f",
            width: 2,
         },
      },
      axisTick: {
         show: false, //隐藏X轴刻度
         alignWithLabel: true,
      },
      axisLabel: {
         show: true,
         textStyle: {
            color: "#BDD8FB", //X轴文字颜色
            fontSize: 12,
         },
         interval: 0,
         formatter: function (value) {
            var ret = ""; //拼接加\n返回的类目项
            var maxLength = 4; //每项显示文字个数
            var valLength = value.length; //X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1) {
               //如果类目项的文字大于5,
               for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
               }
               return ret;
            } else {
               return value;
            }
         },
      },
   },
   yAxis: [
      {
         type: "value",
         name: "单位：Kg",
         nameTextStyle: {
            color: "#BDD8FB",
            fontSize: 12,
         },

         splitLine: {
            show: true,
            lineStyle: {
               color: "rgba(255, 255, 255, 0.15)",
               type: 'dashed', // dotted 虚线
            },
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
               color: "#163a5f",
               width: 1,
            },
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: "#BDD8FB",
               fontSize: 12,
            },
         },
      },
      {
         type: "value",
         name: "",
         nameTextStyle: {
            color: "#BDD8FB",
            fontSize: 12,
         },
         splitLine: {
            show: false,
            lineStyle: {
               width: 1,
               color: "#CED2DB",
            },
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
               color: "#163a5f",
               width: 2,
            },
         },
         axisLabel: {
            show: false,
            textStyle: {
               color: "#797A7F",
               fontSize: 12,
            },
         },
      },
   ],
   series: [
      {
         name: "产量统计",
         type: "bar",
         barWidth: 15,
         itemStyle: {
            color: {
               type: 'linear',
               x: 0,  //右
               y: 0,  //下
               x2: 0,  //左
               y2: 1,  //上
               colorStops: [
                  {
                     offset: 0.1,
                     color: '#13D5FC' // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: '#2059B8' // 100% 处的颜色
                  }
               ]
            },
            barBorderRadius: [20, 20, 20, 20],
         },
         label: {
            show: true,
            position: "top",
            distance: 0,
            color: "#1ACDDC",
            formatter: "{c}" + "次",
         },
         data: [200, 85, 112, 275, 305, 415, 741, 405],
      },
      {
         // name: '背景',
         type: "bar",
         barWidth: "15px",
         xAxisIndex: 0,
         yAxisIndex: 1,
         barGap: "-110%",
         data: [100, 100, 100, 100, 100, 100, 100], //背景阴影长度
         itemStyle: {
            normal: {
               color: "rgba(255,255,255,0.039)",
               barBorderRadius: [20, 20, 20, 20],
            },
         },
         tooltip: {
            show: false,
         },
         zlevel: 9,
      },
   ],
}
myChart.setOption(option)      
    },

     showChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart =this.$echarts.init(document.getElementById('main3'))

      var value = 200 //当前进度
      var maxValue = 300 //进度条最大值
      var option = {
        title: {
          text: '2021折线图分析分析分析分析',
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            fontSize: 14,
            fontWeight: 'normal',
            color: '#666666',
          },
          left: '-5',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            console.log('params', params)

            // // 获取xAxis data中的数据
            let dataStr = `<div>
                            <p style="font-size:14px;font-weight:bold;color:#333;margin:0 0px 10px;">
                              ${params[0].name}XX总数 ? 个</p>
                        </div>`
            params.forEach((item) => {
              // 获取图标(小圆点)颜色，并且自定义样式为正方形，即要改变小圆点，只需重写marker的html片段，并修改样式即可
              // 获取series中data
              // 获取seriersName
              console.log('item', item)
              dataStr += `<div>
                <div style="font-size:14px; color:#666; margin-top:10px;">
                  <span style="display:inline-block;margin-right:0px;width:8px;height:8px;border-radius:4px;background-color:${item.color};"></span>
                  <span style="margin-right:5px;">${item.seriesName}</span>
                  <span>${item.data}个</span>
                </div>
              </div>`
            })
            return dataStr
          },
        },
        // 修改图示 图标 - 圆角矩形
        legend: {
          itemHeight: 4,
          itemWidth: 12,
          data: [
            {
              name: '折线图1',
              icon: 'roundRect',
            },
            {
              name: '折线图2',
              icon: 'roundRect',
            },
          ],
          left: '200', // 距离左边
        },
        grid: {
          left: '3%',
          right: '2%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            show: false, //是否显示刻度线 默认为true
            alignWithLabel: true,
          },
          axisLabel: {
            show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
            interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
            textStyle: {
              //textStyle里面写x轴下的字体的样式
              color: '#999',
              fontSize: 14,
            },
          },
          axisLine: {
            onZero: true, // 显示0刻度
            lineStyle: {
              //lineStyle里面写x轴那一条线的样式
              color: '#E6E6E6',
              width: 1, //轴线的粗细
            },
          },
        },
        yAxis: {
          name: '工单数',
          nameTextStyle: {
            padding: [0, 0, 0, -50], // 四个数字分别为上右下左与原位置距离
          },
          splitLine: {
            show: true,
            // 背景虚线
            lineStyle: {
              type: [4, 5],
              dashOffset: 5,
            },
          },
          //用于设置y轴的字体
          axisLabel: {
            show: true, //这里的show用于设置是否显示y轴下的字体 默认为true
            textStyle: {
              //textStyle里面写y轴下的字体的样式
              color: '#999',
              fontSize: 12,
            },
          },
        },
        series: [
          {
            name: '折线图1',
            type: 'line',
            //如果不想折线那么尖锐，可以加上smooth: true变为柔和曲线
            //smooth: true,
            //stack: '总量',
            symbolSize: 7, // 拐点大小
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(239,232,8, .4)',
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255, .1)',
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: '#5393E7', //改变折线点的颜色
                lineStyle: {
                  width: 2, //折线宽度
                  color: '#5393E7', //改变折线颜色
                },
              },
              emphasis: {
                color: '#5393E7',
                lineStyle: {
                  width: 2,
                  color: '#5393E7',
                },
                borderColor: '#5393E7', //拐点边框颜色
                borderWidth: 6, //拐点边框大小
              },
            },
            data: [120, 132, 300, 134, 90, 230, 210, 120, 132, 101, 134, 90],
            zlevel: 11,
          },
          {
            name: '折线图2',
            type: 'line',
            //smooth: true,
            //如果想要y轴的数值不相加，就要去掉stack参数。否则数值就会相加。
            //stack: '总量',
            symbolSize: 7,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(239,232,8, .4)',
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255, .1)',
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: '#F3912E',
                lineStyle: {
                  width: 2,
                  color: '#F3912E',
                },
              },
              emphasis: {
                color: '#F3912E',
                lineStyle: {
                  width: 2,
                  color: '#F3912E',
                },
                borderColor: '#F3912E',
                borderWidth: 6,
              },
            },
            data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
            zlevel: 11,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      //随着浏览器窗口大小改变而改变
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
};
</script>
<style scoped>
.box {
  width: 484px;
  /* height: 720px; */
  background: #e2f2f8;
}
.tab1 {
      width: 300px;
    margin-left: 124px;
}
.tab1 /deep/ .el-tabs__item {
  font-size: 21px;
}
.tab1 /deep/ .el-tabs__item{
    padding: 0 37px
}
.tab1 /deep/ .el-tabs__nav-wrap::after{
    height: 0px;
}
.tab2 {
  width: 378px;
    margin-left: 33px;
}
.tab2 /deep/ .el-tabs__item {
  font-size: 18px;
}
.tab2 /deep/ .el-tabs__nav-wrap::after{
    height: 0px;
}
.css2{
    display: flex;
}

.css1{
    flex: 1;
}
.css3{
    line-height: 80px;
    font-size: 36px;
    margin-right: 20px;
}
.css4{
    line-height: 80px;
}
.css5{
 display: flex;
    justify-content: space-between;
}

.box /deep/ .el-button--primary.is-plain:hover,.box /deep/ .el-button--primary.is-plain:focus{
    background:#ecf5ff !important;
    border-color: #409EFF !important;
    color: #409EFF !important;
}
.box /deep/ .el-button--primary.is-plain:active{
    background:#ecf5ff !important;
    color: #409EFF !important;
}
</style>